<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
    <title>壹脉智能CRM</title>
    <!-- Bootstrap Core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/style.min.css" rel="stylesheet">
    <link href="./css/colors/default.css" id="theme" rel="stylesheet">
    <link rel="stylesheet" href="./css/diy.min.css">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
<div class="preloader">
    <div class="loader">
        <div class="loader__figure"></div>
        <p class="loader__label">壹脉</p>
    </div>
</div>
<div id="main-wrapper">
    <header class="topbar">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">
                    <b>
                        <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
                        <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
                    </b>
                    <span>
                        <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
                    </span>
                </a>
            </div>
            <div class="navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
                    <li class="nav-item"> <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
                </ul>
                <user-head></user-head>

            </div>
        </nav>
    </header>
    <aside class="left-sidebar">
        <div class="scroll-sidebar">
            <company-position></company-position>
            <nav class="sidebar-nav p-0">
                <c-slider current="8"></c-slider>
            </nav>
        </div>
    </aside>
    <div class="page-wrapper">

        <div class="container-fluid">

            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3 class="text-themecolor">数据统计</h3>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
                        <li class="breadcrumb-item">营销活动</li>
                        <li class="breadcrumb-item">分销</li>
                        <li class="breadcrumb-item">
                            <a href="/main/distributionOrdersList.html">
                                分销订单
                            </a>
                        </li>
                        <li class="breadcrumb-item active">订单详情</li>
                    </ol>
                </div>
            </div>

            <div class="bgfff p-l-29 p-r-31">
                <div class="p-t-15 p-b-15 bbef0">
                    <span class="p-r-35 fbold fs20">订单详情</span>
                </div>

                <div class="p-t-15 field-list p-b-15 bbef0">
                    <h3 class="fs18 m-b-0">基本信息</h3>
                    <div class="item" v-for="item in baseInfoConfig" :key="item.key">
                        <span class="field-name">{{item.label}}</span>
                        <span class="field-value">{{item.render ? item.render(info) : info[item.key]}}</span>
                    </div>
                </div>

                <div class="p-t-15 field-list p-b-15">
                    <h3 class="fs18 m-b-0">收货人信息</h3>
                    <div class="item" v-for="item in consigneeConfig" :key="item.key">
                        <span class="field-name">{{item.label}}</span>
                        <span class="field-value">{{item.render ? item.render(info) : info[item.key]}}</span>
                    </div>
                </div>
                <div class="p-t-15 field-list p-b-15">
                    <h3 class="fs18 m-b-0">商品信息</h3>
                    <table class="align-cen-table textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20">
                        <thead>
                        <tr>
                            <th>商品名称</th>
                            <th>价格</th>
                            <th>数量</th>
                            <th>规格</th>
                        </tr>
                        </thead>
                        <tbody class="bgfff">
                        <tr class="curpointer">
                            <td>{{info.goodsName}}</td>
                            <td>￥{{info.price | formatMoney}}</td>
                            <td>{{info.specNum}}</td>
                            <td>{{info.specAttribute}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="item">
                        <span class="field-name">合计：</span>
                        <span class="field-value">￥{{info.allPrice | formatMoney}}</span>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="./js/jquery.min.js"></script>

<script src="./js/bootstrap.min.js"></script>
<script src="./js/perfect-scrollbar.jquery.min.js"></script>
<script src="./js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="./js/custom.min.js"></script>
<script src="./js/layer/layer.js"></script>
<!-- ============================================================== -->

<script src="./js/vue.js"></script>
<script src="./js/config.js"></script><script src="./js/extend.js"></script>
<script>
    $(function () {
        let formatDate = Vue.filter('formatDate');

        var vw = new Vue({
            el: '#main-wrapper',
            data: {
                info: {},
                navs_id: '',
                navs:[
                    { id: '', label: '全部订单' },
                    { id: '1', label: '待付款' },
                    { id: '2', label: '待发货' },
                    { id: '3', label: '待收货' },
                    { id: '4', label: '交易完成' },
                ],
                baseInfoConfig:[
                    { label: '订单编号', key: 'ordersNo' },
                    { label: '订单状态', render(info){
                            let { refundState, orderState } = info;
                            let obj = {
                                1: {
                                    1: '待付款',
                                    2: '待发货',
                                    3: '待收货',
                                    4: '已完成',
                                    5: '取消订单',
                                    6: '退款成功',
                                },
                                2: '退款中',
                                3: '退款成功',
                            };

                            return refundState == 1 ? obj[refundState][orderState] : obj[refundState];
                        } },
                    { label: '购买用户', key: 'name' },
                    { label: '下单时间', key: 'createTime', render(info){
                            let time = info.createTime;
                            return time ? formatDate(time, 'yyyy-MM-dd hh:mm:ss') : ''
                        } },
                    { label: '付款时间', key: 'payTime',  render(info){
                            let time = info.payTime;
                            return time ? formatDate(time, 'yyyy-MM-dd hh:mm:ss') : ''
                        }},
                    { label: '客户留言', key: 'remark' },
                ],
                consigneeConfig: [
                    { label: '收件人姓名', key: 'payName' },
                    { label: '联系电话', key: 'payPhone' },
                    { label: '收货地址', key: 'locationAddress' },
                ],
                orderId: '',
            },
            mounted() {
                try {
                    this.orderId = $.formatParams(location.href).id;
                }catch (e) {

                }
                if (this.orderId) {
                    this.getOrderInfo();
                }
            },
            methods:{
                getOrderInfo() {
                    $.cAjax('/crmPc/distribution/getRoyaltyOrderInfo', {
                        data:{
                            orderInfoId: this.orderId,
                        }
                    }).then(res=>{
                        this.info = res;
                    })
                },
            },

        })
    })
</script>
</body>
</html>












